<template>
    <div class="loginByPhone">
        <div class="title">手机号登录</div>
        <div class="form">
            <van-form>
                <van-cell-group inset>
                    <van-field
                        v-model="phone"
                        clearable
                        type="tel"
                        name="phone"
                        placeholder="请输入手机号"
                        maxlength="11"
                        :formatter="formatter"
                    />
                    <van-field
                        v-model="verifyCode"
                        clearable
                        type="digit"
                        name="verifyCode"
                        placeholder="验证码"
                        maxlength="6"
                        :formatter="formatter"
                    >
                        <template #button>
                            <van-button 
                                size="small"
                                plain 
                                round 
                                :color="phone==''||phone.length<11?'#aaa':'#02b6fd'"
                                :disabled="phone==''||phone.length<11?true:false"
                                @click="getVerifyCode"
                            >获取验证码</van-button>
                        </template>
                    </van-field>
                </van-cell-group>
                <div style="margin: 16px 0;" class="btnLogin">
                    <van-button 
                        round 
                        block 
                        :color="(phone.length==11&&verifyCode.length==6)?'rgb(2, 182, 253)':'rgba(0, 0, 0, 0.1)'" 
                        :disabled="(phone.length==11&&verifyCode.length==6)?false:true"
                        @click="onLogin"
                    >登录</van-button>
                </div>
                <div>
                    <van-field name="checkbox" class="agreement">
                    <template #input>
                        <van-checkbox v-model="checked" shape="circle">
                            未注册手机号登录后将自动生成账号，且代表你已阅读并同意
                            <a href="javascript:void(0)">《用户服务协议》</a>、
                            <a href="javascript:void(0)">《隐私政策》</a>
                        </van-checkbox>
                    </template>
                </van-field>
                </div>
            </van-form>
        </div>
        <!-- Popup -->
        <checkAgreePrompt
            :showPopup="showPopup"
            :msgPopup="loadingPopup"
            @on-disagree="onDisagree"
            @on-agree="onAgree"
        ></checkAgreePrompt>
    </div>
</template>

<script>
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { ref, reactive } from 'vue';
import {login} from '@/api/user';
import checkAgreePrompt from './checkAgreePrompt.vue';
export default {
    name:'loginByPhone',
    setup(props,context) {
        const store = useStore();
        const router = useRouter();

        const phone = ref('');  // 用户名
        const verifyCode = ref('');  // 验证码
        const checked = ref(false);  // 协议是否勾选
        // 格式化函数 去除非数字的输入
        const formatter = (value) => value.replace(/\D/gi,'');
        // 随机获取验证码
        const getVerifyCode = () => {
            verifyCode.value = Math.floor(Math.random() * (1000000 - 100000) + 100000)
            console.log(verifyCode.value);
        }
        const showPopup = ref(false);
        const loadingPopup = reactive({
            status:false,
            message:'loading'
        });
        // 点击登录
        const onLogin = () => {
            if(checked.value){
                loadingPopup.status = true;
                login({
                    type:'phone',
                    phone:phone.value
                }).then((res)=>{
                    if(res.code == '1200' || res.code == '1100'){
                        console.log(res.message);
                        store.commit('SET_TOKEN',JSON.stringify(res.data));
                        localStorage.setItem('token',JSON.stringify(res.data));
                        store.commit('SET_USERNAME',res.data.username);
                        localStorage.setItem('username',res.data.username);
                        store.commit('SET_ID',res.data._id);
                        localStorage.setItem('userId',res.data._id);
                        store.commit('SET_USER',res.data);
                        
                        setTimeout(() => {
                            loadingPopup.status = false;
                            history.back();
                        }, 1000);
                    }
                }).catch((error)=>{
                    console.log(error);
                })
            }
            else{
                showPopup.value = true;
            }
        };
        const onAgree = () => {
            checked.value = true;
            showPopup.value = false;
            onLogin();
        }
        const onDisagree = () => {showPopup.value = false;}
        return {
            phone,
            verifyCode,
            checked,
            formatter,
            getVerifyCode,
            showPopup,
            loadingPopup,
            onLogin,
            onAgree,
            onDisagree,
        };
    },
    components:{
        checkAgreePrompt
    }
}
</script>

<style>
.loginByPhone{
    width: 100%;
    box-sizing: border-box;
    padding: 0 25px;
    display: flex;
    flex-direction: column;
}
.loginByPhone .title{
    margin: 25px 0;
    font-size: 1.625rem;
}
.loginByPhone .form{
    margin-top: 30px;
}
.loginByPhone .form .van-cell-group{
    margin: 0;
    border-bottom: 1px solid #f4f4f4;
    border-radius: 0;
}
.loginByPhone .form .van-cell-group .van-cell{
    padding: 10px 0;
}
.loginByPhone .form .van-cell-group .van-cell:after{
    right: 0;
    left: 0;
}
.loginByPhone .form .van-cell-group input{
    height: 30px;
    font-size: 18px;
    caret-color: #02b6fd;
}
.loginByPhone .form .btnLogin .van-button{border: 0;}

.loginByPhone .form .agreement{
    margin-top: 15px;
    padding: 0;
    font-size: 0.625rem;
    color: #a2a2a2;
}
.loginByPhone .form .agreement .van-checkbox{
    margin: 0;
    align-items: flex-start;
}
.loginByPhone .form .agreement .van-checkbox .van-checkbox__icon{
    height: 0.625rem;
}
.van-checkbox__icon{margin-top: 3px;}
.van-checkbox__icon .van-icon{
    border-radius: 50%;
    width: 0.875rem;
    height: 0.875rem;
    line-height: 1.23;
    font-size: 0.625rem;
}
.van-checkbox__icon--checked .van-icon{
    background-color: #02b6fd;
    border-color: #02b6fd;
}
</style>